<template>



	<view class="pageBox">
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view class="goback">
					<view @click="goBack" class="goicon" style="background:url(../../../static/goback.png);background-size:contain;background-repeat: no-repeat;">
					</view>
				</view>
				<view class="title">可选课程</view>
				<view class="right">

				</view>
			</view>
		</view>
		<view class="courseBox" @click="goCourseDetail">
			<view class="classStatus">内</view>
			<image :src="schoolImages" class="schoolIamges"></image>
			
			<view class="fontBox">
				<view class="className">春天培训班</view>
				<view class="one">
					<image src="../../../static/img/parents/place.png"></image>
					<text>活动时间</text>
				</view>
				<view class="two">
					<image src="../../../static/img/parents/time.png"></image>
					<text>周一下午16:00-17:00</text>
				</view>
			</view>
			<view class="newsBox">
				<text class="studyTime">学时:{{studyTime}}小时</text>
				<view class="allStudent">总人数:{{allStudent}}人</view>
				<view class="lastnum">
					<view class="LastNum">剩余名额数:</view>
					<text class="lastNum">{{lastnum}}人</text>
					<view class="end"> 结束</view>
				</view>
				<button type="primary" class="jion">报名</button>
			</view>
		</view>

	</view>


	
</template>

<script>
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82 + 11,



				"schoolImages": '../../../static/img/choose03.ee03d7e.png', //学校图片路径
				"studyTime": 16, //学时
				"allStudent": 30, //总人数
				"lastnum": 10, //剩余名额数

			}
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},

		methods: {
			goCourseDetail() {
				uni.navigateTo({
					url: './courseDetail'
				})
			},
			goBack(){
				uni.navigateBack({
					delta:1
				})
			}
		

		}
	}
</script>

<style lang="less">
	.navBarBox {
		width: 100%;
	}
	
	.navBarBox .statusBar {}
	
	.navBarBox .navBar {
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		justify-content: space-between;
		
		line-height: 93rpx;
		font-size: 40rpx;
	}
	
	.goback {
		flex: 1;
		height: 100%;
	}
	
	.goicon {
		width: 30rpx;
		height: 30rpx;
		background-color: #00BEA9;
		margin-top: 30rpx;
	}
	
	.title {
		flex: 1;
		height: 100%;
	
	}
	
	.right {
		flex: 1;
	}
	page {
		background-color: rgb(246, 246, 246);

		.pageBox {
			background-color: rgb(246, 246, 246);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			

			.courseBox {
				width: 690rpx;
				height: 220rpx;
				background-color: #FFFFFF;
				border: #eee solid 1rpx;
				border-radius: 8rpx;
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				margin-top: 40rpx;
				position: relative;
				.classStatus{
					width: 32rpx;
					height: 32rpx;
					border-radius: 16rpx;
					background-color: #FFFFFF;
					color: rgb(255,145,97);
					font-size: 21rpx;
					text-align: center;
					position: absolute;
					left: 32rpx;
					top: 40rpx;
				}

				image {
					width: 166rpx;
					height: 146rpx;
					margin-top: 34rpx;
					margin-left: 18rpx;
				}

				.fontBox {
					.className {
						margin-left: 10rpx;
						margin-top: 48rpx;
					}

					.one {
						margin-top: -10rpx;
						font-size: 22rpx;
						color: rgb(179, 179, 179);

						image {
							width: 22rpx;
							height: 22rpx;
						}

					}

					.two {



						font-size: 22rpx;
						color: rgb(179, 179, 179);

						image {
							margin-top: 10rpx;
							width: 22rpx;
							height: 22rpx;
						}
					}

				}

				.newsBox {
					height: 220rpx;
					width: 206rpx;
					margin-right: 14rpx;
					text-align: right;

					.studyTime {
						color: rgb(157, 157, 157);
						font-size: 24rpx;
						border-bottom: rgb(157, 157, 157) 2rpx solid;
						margin-top: 22rpx;
					}

					.allStudent {
						color: rgb(255, 124, 67);
						font-size: 28rpx;
						font-weight: 550;
						margin-top: 18rpx;
					}

					.lastnum {
						width: 206rpx;
						font-size: 21rpx;
						color: rgb(157, 157, 157);
						display: flex;
						margin-top: 15rpx;

						.LastNum {}

						.lastNum {
							color: rgb(255, 124, 67);


						}

						.end {
							margin-left: 12rpx;
						}
					}

					.jion{
						width: 102rpx;
						height: 52rpx;
						font-size: 22rpx;
						background: #2db3fe;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 102rpx;
						margin-top: 16rpx;
					}
				}


			}

		}
	}
</style>
